<script setup>

import {ref} from "vue";
import VTable2 from "../../components/table/VTable2.vue";

const tableDemoRef = ref(null);
const multipleTableDemoRef = ref(null);

const getData = (type) => {
  if (type !== 'multiple') {
    tableDemoRef.value.getTableData()
  } else {
    multipleTableDemoRef.value.getTableData()
  }
}
const reload = (type) => {
  if (type !== 'multiple') {
    tableDemoRef.value.loadTable()
  } else {
    multipleTableDemoRef.value.loadTable()
  }
};
const getMultipleSelection = () => {
  console.log('多选数据：', multipleTableDemoRef.value.getMultipleSelection())
}
</script>

<template>
  <div>
    <h2>表格组件</h2>
    <v-table2 ref="tableDemoRef" url="/api/table/data/get">
      <el-table-column label="ID" prop="id"/>
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="年龄" prop="age"/>
      <el-table-column label="性别" prop="sex"/>
    </v-table2>
    <div>
      <el-button @click="getData">获取表格数据</el-button>
      <el-button @click="reload('')">重新加载表格</el-button>
    </div>
    <h2>多选表格组件</h2>
    <v-table2 ref="multipleTableDemoRef" multiple post url="/api/table/data/post">
      <el-table-column label="ID" prop="id"/>
      <el-table-column label="姓名" prop="name"/>
      <el-table-column label="年龄" prop="age"/>
      <el-table-column label="性别" prop="sex"/>
    </v-table2>
    <div>
      <el-button @click="getData('multiple')">获取表格数据</el-button>
      <el-button @click="getMultipleSelection">获取多选数据</el-button>
      <el-button @click="reload('multiple')">重新加载表格</el-button>
    </div>
  </div>
</template>

<style scoped>

</style>